/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 10:41:37
 * @LastEditTime: 2019-09-02 10:17:37
 * @LastEditors: Please set LastEditors
 */
import React,{Component} from 'react';
class App extends Component{
  constructor(props){
    super(props);
    this.state={
      number:0
    }
  }
  handle(){
    this.setState({
      number:this.state.number+1
    })
  }
  componentWillUnmount(){
    console.log("组件销毁执行")
  }
  componentWillMount(){
    console.log("组件初始化")
  }
  shouldComponentUpdate(nextProps,nextState){
    // nextProps 改变之后的 props 值
    // nextState 改变之后的 state 值
    if(nextState.number == 4){
      return true
    }
    return false
    // console.log(nextProps,nextState)
    // console.log("组件更新执行 必须返回true 才会渲染组件")
    // return true;
  }
  render(){
    return (
      <div className="App">
      <h1>当前：{this.state.number}</h1>
        <button style={{padding:"10px"}}
        onClick={()=>{this.handle()}}
        >
          增加
        </button>
      </div>
    );
  }
}

export default App;
